<template>
  <el-dialog
    :visible="opetatorDialog"
    :before-close="handleClose"
    :show-close="true"
    :close="handleClose"
    :append-to-body="true"
    class="operator-dialog"
  >
    <div class="center"><div class="del-icon"/></div>
    <div class="title">请确认是否提交修改</div>
    <div class="tip">创建人及当前节点之前所有审批人将收到修改提醒</div>
    <div class="user-list">
      <div v-for="(item,index) in userList" :key="index" class="item">
        <div class="user">
          <el-image :src="!!item.avatar?item.avatar:defaultAvatar" fit="fit" alt="" class="img"/>
          <ToolTip v-if="item.userName.length > 5" :content="item.userName"/>
          <span v-else>{{ item.userName }}</span>
        </div>
        <div v-if="item.isCreator" class="creator">创建人</div>
      </div>
    </div>
    <div slot="footer" class="center">
      <el-button :disabled="btnDisabled" type="primary" size="small" style="height: 32px" @click="handleModify">确定</el-button>
      <el-button class="cancel-btn-style" type="info" style="width: 80px; height:32px" @click="handleClose">取消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import Title from '@/components/Title';
import defaultAvatar from '@/assets/user-avatar.png';

export default {
  components: {
    Title
  },
  props: {
    process: {// 流程信息
      type: Array,
      default: () => []
    },
    defaultAduitorList: { // 申请人
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      defaultAvatar,
      opetatorDialog: false,
      btnDisabled: false
    };
  },
  computed: {
    userList() { // 创建人及节点已审批人员、抄送人员
      const processList = this.process || [];
      const allExamineUserList = [];
      processList.map((process, index) => {
        process.examineRoles.map((item) => {
          if (process.nodeName === '任务发起' && index === 0) {
            item.aduitors.forEach((j) => {
              if (!allExamineUserList.find(i => i.id === j.id) && j.isCreator) {
                allExamineUserList.push(j);
              }
            });
          } else {
            item.aduitors.forEach((j) => {
              if ((!allExamineUserList.find(i => i.id === j.id)) && j.userStatus !== 0 && j.userStatus !== 1) {
                allExamineUserList.push(j);
              }
            });
          }
        });
      });
      return allExamineUserList;
    }
  },
  methods: {
    openDialog() {
      this.opetatorDialog = true;
    },
    handleClose() {
      this.opetatorDialog = false;
    },
    handleModify() {
      this.btnDisabled = true;
      const _this = this;
      setTimeout(function() {
        _this.$emit('handleModify', _this.userList);
        _this.handleClose();
        _this.btnDisabled = false;
      }, 1000);
    }
  }
};
</script>

<style lang="scss" scoped>
  .operator-dialog{
    &::v-deep {
      .el-dialog {
        border-radius: 8px !important;
        width: 376px !important;
      }
      .el-dialog__header {
        padding: 0px;
        padding-bottom: 0px;
      }
      .el-dialog__body {
        height: 348px;
        padding: 24px 24px 0px 24px !important;
      }
      .el-dialog__footer {
        padding: 0 0 24px 0 !important;
      }
    }

    .user-list{
      display: flex;
      width: 100%;
      max-height: 140px;
      flex-wrap: wrap;
      margin-top: 16px;
      @include scrollBar(hidden, auto, 6px);
      .item{
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-basis: calc(100% / 5);
        margin-bottom: 12px;
        .user {
          display: flex;
          flex-direction: column;
          align-items: center;
        }
      }
      .img{
        width: 40px;
        height: 40px;
        border-radius:50% ;
        margin-bottom: 4px;
      }
    }
    .center{
      display: flex;
      justify-content: center;
    }
    .del-icon {
      width: 64px;
      height: 64px;
      border-radius: 50%;
      background: url('../../../../assets/hint.png') center no-repeat;
      background-size: 100% auto;
      margin: 0;
    }
    .title {
      font-size: 16px;
      font-family: PingFangSC-Medium;
      text-align: center;
      color: #333333;
    }
    .tip {
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #ff4e5f;
    }
    .creator {
      position: absolute;
      bottom: 17px;
      display: flex;
      width: 40px;
      height: 14px;
      justify-content: center;
      align-items: center;
      font-size: 10px;
      color: #ffffff;
      background: #406eff;
      border: 1px solid #ffffff;
      border-radius: 8px;
    }
  }
</style>
